<template>
    <div class="addLive">
        <div class="addLive_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">{{topText}}<i class="el-icon-close"></i></div>
		</div>
        <!-- 商家类型与返回 -->
        <div class="newPrimaryClass_type">
            <div>直播列表/<span class="text">{{topText}}</span></div>
            <el-button @click="toBack" type="success">返回</el-button>
        </div>

        <!-- 基础信息 -->
        <div class="liveInfo">
            <h3>基础信息</h3>
            <el-form>
                <el-form-item label-width="80px" label="直播名称">
                    <el-input style="width:50%;" placeholder="请输入直播名称" type="text" v-model="liveTitle"></el-input>
                </el-form-item>
                <div class="item">
                    <el-form-item label-width="80px" label="直播类型">
                       <el-select v-model="valueType" @change="selectType" placeholder="请选择">
                            <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left:10px;" label-width="80px" label="直播分类">
                       <el-select v-model="valueCate" @change="selectCate" placeholder="请选择">
                            <el-option
                            v-for="item in cateList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item label-width="80px" label="封面图片">
                    <el-upload
                        action="/api/client/base/uploadfile"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        ref="upload"
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :auto-upload="true"              
                        :limit="1" 
                        :file-list="fileList"           
                        accept="image/jpeg, image/jpg, image/gif, image/png"    
                        multiple>
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <p>展示在直播列表的图片</p>
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button type="primary" @click="toAddLive">提交</el-button>
            </div>
        </div>

        <!-- 直播商品 -->
        <div class="liveShop" v-if="liveId">
            <h3>直播商品</h3>
            <div class="partnerList_table">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="普通商品" name="1"></el-tab-pane>
                    <el-tab-pane label="产品包" name="2"></el-tab-pane>
                    <el-tab-pane label="小区" name="4"></el-tab-pane>
                    <el-tab-pane label="点赞量" name="3"></el-tab-pane>
                    <el-tab-pane label="评论" name="5"></el-tab-pane>
                </el-tabs>
                <el-button type="success" v-if="activeName!='3' && activeName!='5'" style="margin-bottom:20px;" @click="addProduct">{{activeName=='1'?'新增商品':activeName=='2'?'新增产品包':'新增小区'}}</el-button>
                <div class="partnerList_bottom_table">
            <table v-if="activeName!='3' && activeName!='5'">
                <tr v-if="activeName!='4'">
                  <th></th>
                  <th>序号</th>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th v-if="activeName=='1'">库存</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                <tr v-if="activeName=='4'">
                  <th></th>
                  <th>序号</th>
                  <th>小区名称</th>
                  <th>操作</th>
                </tr>
                <!-- 普通商品 -->
                <template v-if="activeName=='1'">
                    <tr v-for="(v,i) in tableList" :key="i">
                        <td>
                            <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                        </td>
                        <td>{{v.id}}</td>
                        <td>{{v.product_title}}</td>
                        <td>{{v.price}}</td>
                        <td>{{v.num}}</td>
                        <td>{{v.status==1?'上架':'下架'}}</td>
                        <td>
                            <button class="shelves" @click="toDel(v.id)">删除</button>
                        </td>
                    </tr>
                </template>
                <!-- 产品包 -->
                <template v-if="activeName=='2'"> 
                    <tr v-for="(v,i) in tableList" :key="i">
                        <td>
                            <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                        </td>
                        <td>{{v.id}}</td>
                        <td>{{v.name}}</td>
                        <td>{{v.primary_price}}</td>
                        <td>{{v.status==1?'上架':'下架'}}</td>
                        <td>
                            <button class="shelves" @click="toDel(v.id)">删除</button>
                        </td>
                    </tr>
                </template>
                <!-- 小区 -->
                <template v-if="activeName=='4'"> 
                    <tr v-for="(v,i) in tableList" :key="i">
                        <td>
                            <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                        </td>
                        <td>{{v.id}}</td>
                        <td>{{v.name}}</td>
                        <td>
                            <button class="shelves" @click="toDel(v.id)">删除</button>
                        </td>
                    </tr>
                </template>
                <tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
            </table>

            <!-- 点赞 -->
            <table v-else-if="activeName=='3'">
                <tr>
                  <th></th>
                  <th>序号</th>
                  <th>点赞人</th>
                  <th>点赞时间</th>
                </tr>
                <tr v-for="(v,i) in tableList" :key="i">
                  <td>
                    <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                  </td>
                  <td>{{v.id}}</td>
                  <td>{{v.user_id?v.user_id.username:''}}</td>
                  <td>{{$moment(v.create_time*1000).format('YYYY-MM-DD HH:mm')}}</td>
                </tr>
                <tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
            </table>

            <!-- 评论 -->
            <table v-else>
                <tr>
                  <th></th>
                  <th>序号</th>
                  <th>用户</th>
                  <th>内容</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(v,i) in tableList" :key="i">
                    <td>
                        <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                    </td>
                    <td>{{v.id}}</td>
                    <td>{{v.user_id?v.user_id.username:''}}</td>
                    <td>{{v.content}}</td>
                    <td>{{$moment(v.create_time*1000).format('YYYY-MM-DD HH:mm')}}</td>
                    <td>
                        <button class="shelves" @click="toDel(v.id)">删除</button>
                    </td>
                </tr>
                <tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
            </table>

					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="page"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pagesize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
								background>
							</el-pagination>
						</div>
					</div>
				</div>
            </div>
        </div>
        <el-dialog
            :title="dialogTit"
            :visible.sync="dialogVisible_add"
            @closed="closedFn"
            width="50%">
            <div class="houseHoldBox">
                <div class="inputBox">
                    <el-input type="text" v-model="productName" @blur="changeInput" :placeholder="dialogPlace"></el-input>
                    <el-button type="primary" @click="searchProduct">搜索</el-button>
                </div>
                <div class="shopBox">
                    <div class="item" v-for="(item,index) in productList" :key="index">
                        <el-radio v-model="productRadio" :label="item.id" >
                            <div class="radioBox" v-if="activeName=='1'">
                                <img :src="item.main_imgurl[0].path" mode="" />
                                <div class="title">{{item.product_title}}</div>
                            </div>
                            <div class="radioBox" v-if="activeName=='2'">
                                <img :src="item.lead_img.path" mode="" />
                                <div class="title">{{item.name}}</div>
                            </div>
                            <div class="radioBox" v-if="activeName=='4'">
                                <div class="title">{{item.name}}</div>
                            </div>
                        </el-radio>
                    </div>
                    <div class="openMore" v-if="productList.length" @click="moreBtn">{{moreText}}</div>
                </div>
                <div class="notList" v-if="searchShopList">暂无数据~</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_add = false">取 消</el-button>
                <el-button type="primary" @click="addProductSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      topText: "新增直播",
      liveTitle: "",
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: "",
      tableList: [],
      page: 1,
      pagesize: 10,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      total: 0,
      checkAll: false,
      typeList: [
        {
          name: "普通",
          value: 0
        },
        {
          name: "设计师",
          value: 1
        },
        {
          name: "施工队",
          value: 2
        },
        {
          name: "商家",
          value: 3
        },
        {
          name: "小区",
          value: 4
        }
      ],
      valueType: "", //选中类型
      cateList: [], //分类数据
      valueCate: "", //选中分类
      activeName: "1",
      liveId: null,

      dialogTit: "添加普通商品",
      dialogVisible_add: false,
      productName: "", //商品名
      productList: [], //商品列表
      productRadio: "", //选中的商品
      pagePro: 1,
      pagesizePro: 10,
      moreText: "点击加载更多~",
      searchShopList: false,
      dialogPlace: "请输入商品名"
    };
  },
  mounted() {
    this.getCateList();
    this.liveId = this.$route.query.id;
    if (this.liveId) {
      this.getDetail();
      this.getProductList();
      this.topText = "直播详情";
    }
  },
  methods: {
    //   获取详情
    getDetail() {
      this.$http.post("/api/root/Live/view", { id: this.liveId }).then(res => {
        // console.log(res, "直播详情");
        if (res.code == 1) {
          this.liveTitle = res.data.title;
          this.fileList.push({
            id: res.data.cover.id,
            url: res.data.cover.path
          });
          this.valueCate = res.data.category_id;
          this.valueType = res.data.type;
        }
      });
    },
    // 获取分类列表
    getCateList() {
      this.$http.post("/api/root/LiveCategory/getList").then(res => {
        // console.log(res, "分类列表");
        if (res.code == 1) {
          this.cateList = res.data ? res.data : [];
        }
      });
    },

    // 新增直播
    toAddLive() {
      let imgArr = [];
      this.fileList.map(item => {
        if (item.response) {
          imgArr.push(item.response.data.id);
        } else {
          imgArr.push(item.id);
        }
      });
      let params = {
        id: this.liveId,
        title: this.liveTitle,
        type: this.valueType,
        category_id: this.valueCate,
        cover: imgArr.join(",")
      };
      let url = this.liveId ? "/api/root/Live/edit" : "/api/root/Live/add";
      this.$http.post(url, params).then(res => {
        // console.log(res, "增加或编辑直播结果");
        if (res.code == 1) {
          this.$message.success(this.liveId ? "修改成功" : "添加成功");
          if (!this.liveId) {
            this.$router.back(1);
          }
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 切换tabs
    handleClick(e) {
      this.shelvesAlls = [];
      this.checkBoxAll = [];
      this.checkAll = false;
      this.page = 1;
      if (e.name == "1") {
        this.getProductList();
      } else if (e.name == "2") {
        this.getPackList();
      } else if (e.name == "3") {
        this.getSupportList();
      } else if (e.name == "4") {
        this.getEstateList();
      } else if (e.name=='5') {
        this.getCommentList()
      }
    },

    // 获取普通商品列表
    getProductList() {
      let params = {
        live_id: this.liveId,
        page: this.page,
        pagesize: this.pagesize
      };
      this.$http.post("/api/root/LiveProduct/index", params).then(res => {
        console.log(res, "普通商品列表");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;
        }
      });
    },
    // 获取产品包列表
    getPackList() {
      let params = {
        live_id: this.liveId,
        page: this.page,
        pagesize: this.pagesize
      };
      this.$http.post("/api/root/LiveProductPack/index", params).then(res => {
        console.log(res, "产品包列表");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;
        }
      });
    },
    // 获取小区列表
    getEstateList() {
      let params = {
        live_id: this.liveId,
        page: this.page,
        pagesize: this.pagesize
      };
      console.log(params, "获取小区列表数据");
      this.$http.post("/api/root/LiveEstate/index", params).then(res => {
        console.log(res, "小区列表");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;
        }
      });
    },

    // 获取点赞量列表
    getSupportList() {
      let params = {
        live_id: this.liveId,
        page: this.page,
        pagesize: this.pagesize
      };
      this.$http.post("/api/root/LiveSupport/index", params).then(res => {
        console.log(res, "点赞列表");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;
        }
      });
    },

    // 获取评论列表
    getCommentList(){
      let params = {
        live_id:this.liveId,
        page:this.page,
        pagesize:this.pagesize
      };
      this.$http.post('/api/root/LiveComment/index',params).then(res=>{
        console.log(res,'评论列表');
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;
        }
      })
    },

    // 删除商品或产品包
    toDel(id) {
      let text =
        this.activeName == "1"
          ? "确定删除该商品吗？"
          : this.activeName == "2"
            ? "确定删除该产品包吗？"
            :this.activeName == '4'
              ?'确定删除该小区吗？'
              : "确定删除该评论吗？";
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url =
            this.activeName == "1"
              ? "/api/root/LiveProduct/del"
              : this.activeName == "2"
                ? "/api/root/LiveProductPack/del"
                :this.activeName == '4'
                  ? "/api/root/LiveEstate/del"
                  :'/api/root/LiveComment/del';
          this.$http.post(url, { id }).then(res => {
            console.log(res, "删除结果");
            if (res.code == 1) {
              this.$message.success("删除成功");
              if (this.activeName == "1") {
                this.getProductList();
              } else if(this.activeName=='2'){
                this.getPackList();
              }else if(this.activeName=='4'){
                this.getEstateList()
              }else{
                this.getCommentList()
              }
            } else {
              this.$message.warning(res.msg);
            }
          });
        })
        .catch(() => {
          console.log("点击取消");
        });
    },

    // 添加商品或产品包
    addProduct() {
      this.dialogVisible_add = true;
      if (this.activeName == "1") {
        this.dialogTit = "添加普通商品";
        this.dialogPlace = "请输入商品名";
      } else if (this.activeName == "2") {
        this.dialogTit = "添加产品包";
        this.dialogPlace = "请输入产品包名";
      } else if (this.activeName == "4") {
        this.dialogTit = "添加小区";
        this.dialogPlace = "请输入小区名";
      }
    },

    // 对话框的搜索按妞
    searchProduct() {
      this.searchShopList = false;
      this.pagePro = 1;
      let objKey = this.activeName == "1" ? "product_title" : "name";
      let params = {
        [`${objKey}`]: this.productName,
        page: this.pagePro,
        pagesize: this.pagesizePro
      };
      console.log(params, "搜索商品或产品包的数据");
      let url =
        this.activeName == "1"
          ? "/api/root/Live/productMatch"
          : this.activeName == "2"
            ? "/api/root/Live/packMatch"
            : "/api/root/Live/estateMatch";
      this.$http.post(url, params).then(res => {
        console.log(res, "商品列表");
        if (res.code == 1) {
          if (!res.data.length) {
            this.searchShopList = true;
          } else if (res.data.length < 10) {
            this.moreText = "没有更多了~";
          }
          this.productList = res.data ? res.data : [];
        }
      });
    },
    // 对话框加载更多
    moreBtn() {
      this.pagePro++;
      let objKey = this.activeName == "1" ? "product_title" : "name";
      let params = {
        [`${objKey}`]: this.productName,
        page: this.pagePro,
        pagesize: this.pagesizePro
      };
      console.log(params, "搜索商品或产品包的数据");
      let url =
        this.activeName == "1"
          ? "/api/root/Live/productMatch"
          : this.activeName == "2"
            ? "/api/root/Live/packMatch"
            : "/api/root/Live/estateMatch";
      this.$http.post(url, params).then(res => {
        console.log(res, "商品列表");
        if (res.code == 1) {
          if (!res.data.length) {
            this.moreText = "没有更多了~";
          }
          this.productList = this.productList.concat(res.data);
        }
      });
    },

    // 对话框中input失去焦点
    changeInput() {
      if (this.dialogTit == "") {
        this.productList = [];
        this.searchShopList = false;
      }
    },
    // 对话框关闭
    closedFn() {
      this.productList = [];
      this.productName = "";
      this.productRadio = "";
      this.searchShopList = false;
    },
    // 添加商品或产品包对话框确定按钮
    addProductSubmit() {
      let addKey =
        this.activeName == "1"
          ? "product_id"
          : this.activeName == "2" ? "pack_id" : "estate_id";
      let params = {
        [`${addKey}`]: this.productRadio,
        live_id: this.liveId
      };
      let url =
        this.activeName == "1"
          ? "/api/root/LiveProduct/add"
          : this.activeName == "2"
            ? "/api/root/LiveProductPack/add"
            : "/api/root/LiveEstate/add";
      this.$http.post(url, params).then(res => {
        console.log(res, "商品添加结果");
        if (res.code == 1) {
          this.$message.success("添加成功");
          this.dialogVisible_add = false;
          if (this.activeName == "1") {
            this.getProductList();
          } else if (this.activeName == "2") {
            this.getPackList();
          } else if (this.activeName == "4") {
            this.getEstateList();
          }
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 选择分类
    selectCate() {},

    // 选择直播类型
    selectType() {},

    // 返回按钮
    toBack() {
      this.$router.back(1);
    },

    // 图片上传
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file, fileList) {
      this.fileList = fileList;
      console.log(this.fileList, "上传图片");
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传商品图片大小不能超过 2MB!");
      }
      return isLt2M;
    },

    // 分页
    handleSizeChange(val) {
      this.pagesize = val;
      if (this.activeName == "1") {
        this.getProductList();
      } else if (this.activeName == "2") {
        this.getPackList();
      } else if (this.activeName == "3") {
        this.getSupportList();
      }else if (this.activeName == "4") {
        this.getEstateList();
      } else if (this.activeName=='5') {
        this.getCommentList()
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.activeName == "1") {
        this.getProductList();
      } else if (this.activeName == "2") {
        this.getPackList();
      } else if (this.activeName == "3") {
        this.getSupportList();
      }else if (this.activeName == "4") {
        this.getEstateList();
      }else if (this.activeName =='5') {
        this.getCommentList()
      }
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map(v => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    }
  }
};
</script>
<style lang="less">
@import "detail.less";
</style>


